<link rel="stylesheet" href="module/dtree/dtree.css"/>
<link rel="stylesheet" href="module/dtree/font/dtreefont.css"/>
<style>
    /** dtree选中颜色重写 */
    .dtree-theme-item-this {
        background-color: #eeeeee !important;
    }

    #proTree {
        height: 535px;
        overflow: auto;
    }

    @media screen and (max-width: 750px) {
        #proTree {
            height: auto;
        }
    }

    /* 防止下拉框的下拉列表被隐藏---必须设置--- */
    .layui-table-cell {
        overflow: visible !important;
    }

    /* 使得下拉框与单元格刚好合适 */
    td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }
</style>

<!-- 关闭Tab时顶部标题 -->
<div class="layui-body-header">
    <span class="layui-body-header-title">项目列表</span>
    <span class="layui-breadcrumb pull-right">
        <a href="#/console/console1">首页</a>
        <a><cite>项目列表</cite></a>
    </span>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!-- 左树 -->
        <div class="layui-col-sm12 layui-col-md4 layui-col-lg3">
            <div class="layui-card">
                <div class="layui-card-body mini-bar" id="proTree">

                </div>
            </div>
        </div>
        <!-- 右表 -->
        <div class="layui-col-sm12 layui-col-md8 layui-col-lg9">
            <div class="layui-card">
                <div class="layui-card-body">

                    <div class="layui-table" id="projectUserTable" lay-filter="projectUserTable"></div>

                </div>
            </div>
        </div>

    </div>
</div>

<!--添加人员表格-->
<script type="text/html" id="project-add-sysUser-model">
    <table class="layui-table" id="projectAddUserTable" lay-filter="projectAddUserTable"></table>
</script>
<!-- 现有人员表格操作列 -->
<script type="text/html" id="project-adduser-table-bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser"><i class="layui-icon">&#xe654;</i>添加人员</button>
    </div>
</script>
<!-- 现有人员表格操作列 -->
<script type="text/html" id="project-sysUser-table-bar">
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="modifyRole">修改角色</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="project-sysUser-role-model">
    <form id="project-sysUser-role-form" lay-filter="project-sysUser-role-form" class="layui-form model-form">
        <input name="pu_id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <select name="pro_role_id" id="selectRoleList" class="layui-input">
                    <option value="1">管理员</option>
                    <option value="2">普通用户</option>
                </select>
            </div>
        </div>
    </form>
</script>
<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'config', 'util', 'dtree', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var util = layui.util;
        var dtree = layui.dtree;
        var admin = layui.admin;
        var tableObj = [];

        var apiPre = "api-scriptwriter/api/mind/projectUser/";
        var nowProId = 0;
        var nowRoleList = [];

        admin.req("api-scriptwriter/api/mind/project/" + 'list', {}, function (data) {
            for (var i = 0; i < data.data.length; i++) {
                var temp = {};
                temp.id = data.data[i].pro_id;
                temp.title = data.data[i].title;
                tableObj.push(temp);
            }
            // console.log(applications);

        }, 'GET');

        // 树形渲染
        setTimeout(function () {
            $('#proTree').html('');
            dtree.render({
                elem: '#proTree',
                data: tableObj
                // , skin: "laySimple"  // layui主题风格
            });
        }, 300);

        // 树形点击事件
        dtree.on('node("proTree")', function (obj) {
            var data = obj.param;
            nowProId = data.nodeId;
            var puTable = function () {
                //获取项目角色列表
                table.render({
                    elem: '#projectUserTable',
                    where: {
                        access_token: config.getToken().access_token
                    },
                    url: config.base_server + apiPre + 'list?pro_id=' + nowProId,
                    page: false,
                    toolbar: "#project-adduser-table-bar",
                    height: '509px ',
                    cols: [[
                        {type: 'numbers'},
                        {field: 'user_id', sort: true, title: '用户ID'},
                        {field: 'nickname', sort: true, title: '姓名'},
                        {
                            field: 'sex', sort: true, title: '性别', templet: function (d) {
                                if (d.sex == 1) {
                                    return '男'
                                } else {
                                    return '女'
                                }
                            }
                        },
                        {
                            field: 'pro_role_id', sort: true, title: '角色', templet: function (d) {
                                for (var i = 0; i < nowRoleList.length; i++) {
                                    if (d.pro_role_id == nowRoleList[i].pr_id) return nowRoleList[i].roleName;
                                }
                                return '';
                            }
                        },
                        {align: 'center', toolbar: '#project-sysUser-table-bar', title: '操作', width: 250}
                    ]]
                });

            };
            admin.req("api-scriptwriter/api/mind/projectRole/list?pro_id=" + nowProId, {}, function (d) {
                nowRoleList = d.data;
                puTable();
            }, "GET");

            // 监听工具条
            table.on('tool(projectUserTable)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                console.log(data)
                if (layEvent === 'modifyRole') { // 查看
                    showModifyRole(data);
                } else if (layEvent === 'del') { // 删除
                    doDelete(data);
                }
            });
            // 监听头部工具条
            table.on('toolbar(projectUserTable)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event === 'addUser') {
                    showEditModel();
                }
            });
            // 删除
            var doDelete = function (obj) {
                layer.confirm('确定要删除吗？', function (i) {
                    layer.close(i);
                    layer.load(2);
                    admin.req(apiPre + 'del/' + nowProId + '/' + obj.user_id, {}, function (data) {
                        layer.closeAll('loading');
                        if (data.code == 0) {
                            layer.msg(data.msg, {icon: 1, time: 1000});
                            table.reload('projectUserTable');
                        } else {
                            layer.msg(data.msg, {icon: 2, time: 3000});
                        }
                    }, 'DELETE');
                });
            };
            // 显示修改角色窗口
            var showModifyRole = function (data) {
                var open2 = layer.open({
                    id: 'formModifyUserRole',
                    type: 1,
                    title: '修改角色',
                    area: '600px',
                    offset: '200px',
                    content: $('#project-sysUser-role-model').html(),
                    success: function () {
                        var select = $("#selectRoleList");
                        if (nowRoleList) {
                            var s = '';
                            nowRoleList.forEach(function (item, index) {
                                s += "<option value='" + item.pr_id + "'>" + item.roleName + "[" + (item.p_look ? '-查-' : '-') + (item.p_modify ? '改-' : '') + "]</option>";
                            });
                            select.html(s);
                        }
                        form.render('select');
                    }, btn: ['确定', '关闭'],
                    yes: function (i, y) {
                        var f = $("#selectRoleList").val();
                        admin.req(apiPre + 'updateByProId', JSON.stringify({
                            pro_id: nowProId,
                            user_id: data.user_id,
                            pro_role_id: f
                        }), function (data) {
                            layer.closeAll('loading');
                            if (data.code == 0) {
                                layer.msg(data.msg, {icon: 1, time: 1000}, function () {
                                });
                                table.reload('projectUserTable');
                                layer.close(open2);
                            } else {
                                layer.msg(data.msg, {icon: 2, time: 3000});
                            }
                        }, 'patch');
                    }
                })
            };

            // 显示添加人员窗口
            var showEditModel = function () {
                var open = layer.open({
                    id: 'proAddUserList',
                    type: 1,
                    title: '添加人员',
                    area: '600px',
                    offset: '120px',
                    content: $('#project-add-sysUser-model').html(),
                    success: function () {
                        table.render({
                            elem: '#projectAddUserTable',
                            where: {access_token: config.getToken().access_token},
                            url: config.base_server + apiPre + 'listUserNotInProject?pro_id=' + nowProId,
                            cols: [[
                                {type: 'checkbox', fixed: 'left'},
                                {field: 'user_id', sort: true, title: 'ID', width: 80},
                                {field: 'nickname', sort: true, title: '姓名'},
                                {
                                    field: 'sex', sort: true, title: '性别', templet: function (d) {
                                        if (d.sex == 1) {
                                            return '男'
                                        } else {
                                            return '女'
                                        }
                                    }
                                }
                            ]]
                        });
                    }, btn: ['添加', '关闭'],
                    yes: function (index, layero) {
                        var checkData = table.checkStatus("projectAddUserTable");
                        var checkUsers = checkData.data;
                        console.log(checkUsers);
                        if (!checkUsers || checkUsers.length == 0) {
                            layer.msg("至少选一个人", {icon: 2, time: 1500});
                            return;
                        }
                        var reqData = [];
                        checkUsers.forEach(function (item, index) {
                            reqData[index] = {pro_id: nowProId, user_id: item.user_id};
                        });
                        layer.load(2);
                        admin.req(apiPre + 'addBatch/', JSON.stringify(reqData), function (data) {
                            layer.closeAll('loading');
                            if (data.code == 0) {
                                layer.msg(data.msg, {icon: 1, time: 1000});
                                table.reload('projectUserTable');
                            } else {
                                layer.msg(data.msg, {icon: 2, time: 3000});
                            }
                            layer.close(open);
                        }, 'POST');
                    }, btn2: function (index, layero) {
                        layer.close(open);
                    }
                });
            };
        });

    });
</script>